<style lang="less">
	@import url("../assets/less/common.less");
	@import url("./main.less");
</style>

<template>
	<div class="zhuye">
		<!--顶部导航开始-->
		<Menu class="nav-top" mode="horizontal" :theme="theme" active-name="1">
			<!--<img class="navlogo" src="../assets/images/logo.png"/>-->
			<div class="right clear">
	        	<MenuItem name="3">
		            <Icon type="ios-contrast"/>换肤
		        </MenuItem>
		        <MenuItem name="4">
		            <Icon type="ios-contact"/>hello Victor
		        </MenuItem>
		        <MenuItem name="5">
		            <Icon type="ios-log-out" />退出登录
		        </MenuItem>
	        </div>
		</Menu>
		<!--顶部导航结束-->
	    
	    <!--左侧导航栏开始-->
	    <div class="navside" :style="{'width':shrink?'60px':'240px'}">
			<div id="mini"><img @click="change" src="@/assets/images/mini.png"></div>
	        <Menu class="menu" :theme="theme" :open-names="['2']" accordion :style="{'display':shrink?'none':'block'}">	
	            <Submenu name="1">
	                <template slot="title">
	                    <Icon type="ios-paper" />实时监控
	                </template>
	                <MenuItem name="1-1">通关数据监控</MenuItem>
	                <MenuItem name="1-2">系统日志</MenuItem>
	            </Submenu>
	            <Submenu name="2">
	                <template slot="title">
	                    <Icon type="ios-people" />用户管理
	                </template>
	                <MenuItem name="2-1">新增用户</MenuItem>
	                <MenuItem name="2-2">活跃用户</MenuItem>
	            </Submenu>
	            <Submenu name="3">
	                <template slot="title">
	                    <Icon type="ios-stats" />统计分析            
	                </template>
	                <MenuItem name="3-1">车辆通行数据统计分析</MenuItem>
	                <MenuItem name="3-2">车流量统计</MenuItem>
	                <MenuItem name="3-3">时段分析</MenuItem>
	                <MenuItem name="3-4">用户留存</MenuItem>
	                <MenuItem name="3-5">流失用户</MenuItem>
	            </Submenu>
	        </Menu>
	        <ul class="mini-menu" :style="{'display':shrink?'block':'none'}">
	        	<li><Icon type="ios-paper" style="font-size: 30px; color: rgb(255, 255, 255);"/>
	        		<ul>
	        			<li>通关数据监控</li>
	        			<li>系统日志</li>
	        		</ul>
	        	</li>
	        	<li><Icon type="ios-people" style="font-size: 30px; color: rgb(255, 255, 255);"/>
	        		<ul>
	        			<li>新增用户</li>
	        			<li>活跃用户</li>
	        		</ul>
	        	</li>
	        	<li><Icon type="ios-stats" style="font-size: 30px; color: rgb(255, 255, 255);"/>
	        		<ul>
	        			<li>车辆通行数据统计分析</li>
	        			<li>车流量统计</li>
	        			<li>时段分析</li>
	        			<li>用户留存</li>
	        			<li>流失用户</li>
	        		</ul>
	        	</li>
	        </ul>
		</div>
		<!--左侧导航栏结束-->
        
        <!--定位栏开始-->
		<div class="location-bar" :style="{'left':shrink?'60px':'240px'}">
			<div class="next" data-roles="next"><Icon type="ios-arrow-back" /></span></div>
		        <div class="tab-content">
		        	<ul class="location-left">
			       	   	<Tag type="dot">后台首页</Tag>
					    <Tag type="dot" closable>个人信息</Tag>
					    <Tag type="dot" closable color="primary">用户管理</Tag>
					    <Tag type="dot" closable>通关数据监控</Tag>
			       	</ul>
		        </div>
		    <div class="pre" data-roles="pre"><Icon type="ios-arrow-forward" /></span></div>
		    <div class="location-right">
		    	<Dropdown class="locationmenu">
			        <Button>标签选项<Icon type="ios-arrow-down"></Icon></Button>
			        <DropdownMenu slot="list">
			            <DropdownItem>关闭所有</DropdownItem>
			            <DropdownItem>关闭其他</DropdownItem>
			        </DropdownMenu>
			    </Dropdown>
		    </div>
	    </div>
	    <!--定位栏结束-->
        
        <!--内容页开始-->
        <div class="single-page" :style="{'left':shrink?'60px':'240px'}">
        	   <div class="single-page-content">
        	   	    <router-view></router-view>
        	   </div>
        	</div>
        	<!--内容页结束-->

	</div>
</template>

<script>
	export default{
		name:'zhuye',
		data(){
			return{
				theme: 'dark',
				shrink:false,
			}
		},
		mounted(){
			this.$router.push({name:'userinquire'})
		},
		methods:{
			change(){
				this.shrink = !this.shrink;
			}
		}
	}
</script>

